<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班乘客付费选座预测系统 - 首页</title>
    <script src="极https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">航班乘客付费选座预测系统</h1>
            <p class="text-gray-600 mt-2">基于机器学习模型的乘客行为分析与预测</p>
        </header>

        <!-- 导航菜单 -->
        <nav class="bg-white rounded-lg shadow-md p-4 mb-8">
            <ul class="flex flex-wrap gap-4 justify-center">
                <li><a href="/" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-home mr-1"></i>首页</a></li>
                <li><a href="/result" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-bar-chart mr-1"></i>预测结果</a></li>
                <li><a href="/suggestions" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-lightbulb-o mr-1"></i>营销建议</a></li>
                {% if current_user.is_admin %}
                <li><a href="/admin" class="text-purple-600 hover:text-purple-800 flex items-center"><i class="fa fa-cog mr-1"></i>系统管理</a></li>
                {% endif %}
                <li><a href="/logout" class="text-red-600 hover:text-red-800 flex items-center"><i class="fa fa-sign-out mr-1"></i>退出登录</a></li>
                <li class="ml-auto text-gray-600">当前用户: {{ current_user.username }}</li>
            </ul>
        </nav>

        <!-- 乘客信息填写表单 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-6 text-gray-700 text-center">
                <i class="fa fa-user-circle mr-2"></i>乘客信息填写
            </h2>

            <form id="predictionForm" action="/predict" method="post" class="space-y-4 max-w-3xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 mb-1" for="age">年龄</label>
                        <input type="number" id="age" name="age" min="18" max="80" required
                            value="{{ form_data.age if form_data else '' }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-1" for="gender">性别</label>
                        <select id="gender" name="gender" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="Male" {% if form_data and form_data.gender == 'Male' %}selected{% endif %}>男性</option>
                            <option value="Female" {% if form_data and form_data.gender == 'Female' %}selected{% endif %}>女性</option>
                            <option value="Other" {% if form_data and form_data.gender == 'Other' %}selected{% endif %}>其他</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-1" for="travel_purpose">旅行目的</label>
                        <select id="travel_purpose" name="travel_purpose" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="Business" {% if form_data and form_data.travel_purpose == 'Business' %}selected{% endif %}>商务</option>
                            <option value="Leisure" {% if form_data and form_data.travel_purpose == 'Leisure' %}selected{% endif %}>休闲</option>
                            <option value="Family" {% if form_data and form_data.travel_purpose == 'Family' %}selected{% endif %}>家庭</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-1" for="booking_window">预订提前天数</label>
                        <input type="number" id="booking_window" name="booking_window" min="1" max="180" required
                            value="{{ form_data.booking_window if form_data else '' }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-1" for="flight_duration">飞行时长（小时）</label>
                        <input type="number" id="flight_duration" name="flight_duration" min="1" max="24" required
                            value="{{ form_data.flight_duration if form_data else '' }}"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-1" for="cabin_class">客舱等级</label>
                        <select id="cabin_class" name="cabin_class" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="Economy" {% if form_data and form_data.cabin_class == 'Economy' %}selected{% endif %}>经济舱</option>
                            <option value="Premium Economy" {% if form_data and form_data.cabin_class == 'Premium Economy' %}selected{% endif %}>超级经济舱</option>
                            <option value="Business" {% if form_data and form_data.cabin_class == 'Business' %}selected{% endif %}>商务舱</option>
                            <option value="First" {% if form_data and form_data.cabin_class == 'First' %}selected{% endif %}>头等舱</option>
                        </select>
                    </div>
                </div>

                <div class="text-center mt-8">
                    <button type="submit" 
                        class="bg-blue-600 text-white py-3 px-8 rounded-md hover:bg-blue-700 transition">
                        <i class="fa fa-calculator mr-2"></i>预测付费意愿
                    </button>
                </div>
            </form>
        </div>

        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>航班乘客付费选座预测系统 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>